アップルをコードしたTypescript:Part 1-1から

0、公式サイト

https://www.typescriptlang.org/

1.インストール

デフォルトJavaScriptnpm install -g typescript インストールされているReactプロジェクトにインストールnpm install --save typescript @types/node @types/react @types/react-dom @types/jest 新しいreact+typescriptのインストールnpx create-react-app my-app --template typescript

2.変換

タイプスクリプトファイル(.ts)をjavascriptファイル(.js)にコンパイルし、コマンドはtsc -w です.

3. tsconfig.json

tsファイルをjsファイルにコンパイルするときに設定するファイルを指定できます.

4.デフォルトタイプ（Primitive type）

配列とオブジェクトは次のように指定されます.

すべての変数にタイプを1つずつ指定しなくても、自動的に指定されます.
(マウスが通過すると、指定されたタイプが表示されます.)

5. Union, any, unknown

Union type

2つ以上のタイプをマージして指定できます.

type test = number | string

let 이름 : test = 'kim'
이름 = 123

let 회원들 : number | string[] = ['kim', 1 ] // 오류가 난다.

let 회원들 : (number | string)[] = ['kim', 1 ] // 정상

any type

解除タイプ指定の構文なので、エラーが発生しても自動的に検索できません.
タイプスクリプトを書く意味がありません.

let 이름 : any = 'kim'
이름 = 123

unknown type

anyと同様に、すべての資料型を許可します.
違いは、エラーが発生した場合、anyとは異なる検索を行うことです.

6.関数用（Void）

// 파라미터와 매개변수에 타입 지정
function 함수(a:number) :number {
  return a *2
}

// 리턴되는 값이 없을 때 는 void를 사용한다.
function 함수 (a:number) :void {
  b = a
}

// 파라미터가 옵션인 경우
function 함수 (a? :number) :void {
  b = a
}

function 함수 (a : (number | undefined) ) :void {
  b = a
}

함수() // 파라미터 없이 실행 가능

7. Narrowing & assertion

Narrowing構文

unionタイプの場合、if文などを使用してタイプを決定します.

// a가 number 혹은 string 이라 에러 발생
function 함수(a : (number | string) ) :number {
  return a + 2
}

// if 문으로 Narrowing 해줘야 함.
function 함수(a : (number | string) ) :number {
  if(typeof a === 'number'){
    return a + 2
  }
}

上記のコードに示すように、if文を使用しているがelseまたはelse ifで終了していない場合は、エラーが発生した場合に必ずelseまたはelse if文を使用します.

サポート構文

function 함수(a : (number | string) ) :number {
  return (a as number) + 2
}

if文などのNarrowing構文を使用せずに、一時的にタイプを指定します.

8. type alias & readonly

type alias

タイプ指定は変数に含めて、再利用とコード量を減らすこともできます.

type AnimalType = string | number | undefined;
let 동물 : AnimalType = 'kim'
let 동물 : AnimalType = 123
let 동물 : AnimalType

オブジェクトのように複雑なタイプの指定度変数を利用して、きれいに整理することができます.

type AnimalType = {name : string , age : number}
let 동물 : AnimalType = {name : 'kim' , age : 20}

タイプの結合

タイプ間で結合して新しいタイプを生成できます.

type Name = string;
type Age = number;
type Person = Name | Age;

拡張オブジェクトタイプ

type PositionX = {x : number}
type PositionY = {y : number}
type newPosition = PositionX & PositionY // {x : number, y : number }

readonly

Const変数は再宣言および再割り当てできません.ただし、JavaScript本シリーズでは、オブジェクトのデータを変更することができます.

const 여친 = {
  name : '엠버'
}

여친.name = '유라'   // 객체의 키값 내부의 데이터는 수정가능하다.

ただし、タイプスクリプトはreadonlyプロパティを使用して変更をブロックできます.
ただし、エラーは発生しますが、jsファイルで変更および実行されます.エラーを表示するだけです.

type GirlfriendType = {
  readonly name : string
}

const 여친 :GirlfriendType = {
  name : '엠버'
}

여친.name = '유라' // 타입스크립트 에러 발생

9. Literal Types & as const

Literal Types

任意の変数が予め指定されたデータのみを持つことを許可する機能

let 변수 : 'kim' | 'lee' 
변수 = 'kim'
변수 = 'Lim' // 에러

関数のパラメータと戻り値も予め指定できます.

type temp = '가위' | '바위' | '보'
function (a : temp) : temp[] {
  return ['가위']	
}

as const

var 자료 = {
  name : 'kim'
}

function 내함수 (a : 'kim') {

}

내함수(자료.name)      // 자료.name 은 'kim' 이므로 정상이여야 하나 에러 발생

データ・オブジェクトのnameタイプは{name:string}です.
私の関数パラメータのタイプは「kim」です.
上のタイプはstringで、下のタイプはkimで、お互い違います!

var 자료 = {
  name : 'kim'
} as const        // 타입이 {name : 'kim'} 으로 설정된다.

function 내함수 (a : 'kim') {

}

내함수(자료.name)      // 정상