Typescript

8149 ワード

TypeScriptとは?


JavaScriptタイプを強制する言語です.
既存のJavaScriptには、次のものがあります.
let aaa = "안녕하세요"

aaa = 3
文字列変数に数字を割り当てても問題ありません
これもメリットがありますが、サービスが増えるにつれて問題が発生する可能性が高いので、その欠点を補うのがTypescriptです.
let bbb:string = "반갑습니다"

タイプスクリプトは変数のデータ型を規定し、同じデータ型のみが再割り当てされます。

//문자타입
    let ccc : string
    ccc = "반가워!"

//숫자타입
    let ddd : number = 10
    ddd = 20

//불린타입
    let eee : boolean = true
    eee = false
    eee = "false"  //오해하기 쉽지만 ""이 있어 문자열이이다

配列でも使用できます。たとえば、次のようにします。

//배열타입
    let fff: number[] = [1,2,3,4,5,"안냥하세여"] //오류 발생
    let ggg: string[] = ["철수","영희","훈이",13] // 오류 발생
    let hhh: (number | string)[] = [1,2,3,4,5,"안냥하세여"]
fffはデジタル型の配列で、「ニャーニャー」があるのでエラー.
gggは文字列の配列で、13個あって、エラー
完璧なのはhhh、number|string
typescriptでは、
or演算子|.
および演算子は

オブジェクトタイプ


オブジェクトタイプ宣言時にインタフェースを使用してタイプを指定する
//객체타입
    interface IProfile{
        name: string
        age: string | number
        school: string
        hobby?: string
    }

    let profile : IProfile ={
        name: "철수",
        age: 8,
        school: "다람쥐초등학교"
    }
    profile.age = "8" 
    profile.school= 123 // school: string이므로 오류 발생

hobby?


趣味の後で対象宣言を言う時にあってもいいですか?表示

関数のタイプ

//함수타입
    const add =(money1:number, money2:number, unit:string):string => {
        return money1 + money2 + unit
    }
    const result = add(1000,2000,"원")
関数タイプはこのように使用されます

tsとtsx



JavaScriptのみjsファイルはtypescriptの.tsに変更されました.
JavaScriptからJSX(reactのHTML)を返すコンポーネントはtypescriptの.tsxに変更されます.

このセクションをtrueに設定すると、より厳格なタイプ管理が可能になります.