型
let hasValue: boolean = true;
let count: number = 10;
let float: number = 3.14;
let negative: number = -0.12;
// # 以下は全部文字列
let single: string = "hello";
let double: string = "hello";
let back: string = `hello`;
型推論
基本的に型を指定せず、宣言時の型推論を使うらしい。
let hasValue2 = true;
let count2 = 10;
let float2 = 3.14;
let negative2 = -0.12;
// # 以下は全部文字列
let single2 = "hello";
let double2 = "hello";
let back2 = `hello`;
オブジェクトの型
const person: {
name: string;
age: number;
} = {
name: "Jack",
age: 21,
};
配列の型
const fruits: string[] = ['apple', 'banana', 'grape']
const fruits2: any[] = ['apple', 'banana', 'grape', 1]
fruits2.forEach((a) => {
console.log(a)
})
タプル (配列のそれぞれの要素に型を指定できる)
const book: [string, number, boolean] = ['business', 1500, false]
book[1] = 700
// NG book[1] = 'shopping'
enum
enum CoffeeSize {
SHORT,
TALL,
GRANDE,
VENTI,
}
const coffee = {
hot: true,
size: CoffeeSize.TALL,
}
// NG coffee.size = 'big'
coffee.size = CoffeeSize.GRANDE
any型
※ なるべく使わないように
let anything: any = true
anything = 'str'
anything = 1
anything = {}
let banana = 'banana';
// 文字列の型の変数にもany型を入れられてしまう。
banana = anything
union型
| を使うことで複数の型を扱うことができる
let unionType: number | string = 10;
unionType = 'hello'
unionType.toUpperCase()
unionType = 10
// NG unionType.toUpperCase()
// 配列にunion型を使う場合
let unionTypes: (number | string)[] = ['hello', 2020]
unionType[0] = 2019
literal型
// constで指定する定数
const apple = 'apple'
// union型と組み合わせるとenumみたいに使える
let clothSize: 'small' | 'medium' | 'large' = 'medium'
clothSize = 'small'
// NG clothSize = 'big'
type alias
type ClothSize = 'small' | 'medium' | 'large'
let shirtSize : ClothSize = 'large'
// NG let pantsSize : ClothSize = 'big'
関数の型
返り値は型推論が効くけど、書いておくのが無難。引数には効かないからちゃんと書こう
function add(num1: number, num2: number): number {
return num1 + num2
}
add(1, 2)
関数が何も返さない場合は void を書こう。
function sayHello(): void {
console.log('Hello!')
}
関数の型注釈
// 型注釈の場合は : でなく =>
const anotherAdd: (n1: number, n2: number) => number = add
// 無名関数も
const anotherAdd2: (n1: number, n2: number) => number = function add(
num1: number,
num2: number
): number {
return num1 + num2
}
// 型推論が効くので左辺か右辺のどちらかに型情報があればよい
const anotherAdd2: (n1: number, n2: number) => number = function add(
num1,
num2
) {
return num1 + num2
}
// アロー関数
const doubleNum = (num: number) => num * 2
const doubleNum2 = (num: number) => {
return num * 2
}
// Callback関数
function doubleAndHandle(num: number, cb: (num: number) => string): void {
const doubleNum = cb(num * 2)
console.log(doubleNum)
}
doubleAndHandle(35, (doubleNum) => {
return doubleNum.toString()
})
unknown, never
// unknown型 anyより少し厳しい
let unknownInput: unknown
let anyInput: any
let text: string
unknownInput = 'hello'
unknownInput = 21
unknownInput = true
// 代入は何でもできるけど、使う時は気をつけて
// NG text = unknownInput
if (typeof unknownInput === 'string') {
// OK
text = unknownInput
}
// any型はいつでも使える
text = anyInput
// 決して何も返さない
function error(msg: string): never {
throw new Error(msg)
// NG これを書くと、reachableになるのでダメ console.log(msg)
}
コンパイル
watchモード
–watch (-w) をつけると保存時に自動的にindex.jsをコンパイルしてくれる
$ yarn tsc index.js -w
tsc –init で tscconfig.json を作って まとめてコンパイル
$ yarn tsc --init
そのあと、以下ですべてのファイルをまとめてコンパイルしてくれる
$ yarn tsc
- tsconfig.jsonでexcludeを指定するとコンパイルしないファイルを指定できる
- includeでコンパイルしたいファイルを指定できる。excludeの方が優先される。
Comments