こんにちは！ASですtypescript(ts)を改めて学習したので学んだ内容をまとめます。
- 型について
- tsconfig.jsonについて
- classについて
- interfaceについて
型について
TypeScriptは、JavaScriptに型を追加した言語である。
|
1 2 3 4 5 6 |
const a : number = 2; const fruits: string[] = ["apple", "banana", "grape"]; const person: { name: string; age: number; } = { name: 'Jack', age: 21 } |
関数の型指定 関数の引数と戻り値の型も指定できる
|
1 2 3 |
function add(a: number, b: number): number { return a + b; } |
unionTypeで複数の型がどちらも入る変数を用意できる
|
1 |
let unionType : number | string = 10; |
リテラル型として、入る値を列挙したもののどれかにすることができる
|
1 |
let clothSize: 'small'| 'medium'|' large' |
新しくオリジナルの型として宣言できる
|
1 |
type ClothSize = 'small' | 'medium' | ' large' |
any型
any 型は何でも代入できる型。
便利だが、型安全性が失われるため、なるべく使用しない方がよい。
Linter設定によっては any を使用するとエラーになることもある。
|
1 |
let a : any = 'hoge' |
unknown型
unknown 型も何でも代入できるが、使用時に型チェックが必要になる。
any を使いたい場面では、こちらの方が安全。
|
1 2 3 4 5 6 7 |
let unknownInput: unknown; let text: string; unknownInput ='hello'; text = anyInput; if(typeof unknownInput === 'string'){ text = teunknownInput } |
never型
never 型は、「関数が最後まで到達しない」ことを表す。
主に例外を投げる関数などで使用される。
|
1 2 3 |
function error(message: string): never{ throw new Error(message); } |
tsconfig.jsonについて
tsc –init コマンドを実行すると、tsconfig.json が作成される。
strict: true にすると、複数の厳密な型チェックが有効になる。
また、target では出力するJavaScriptのバージョンを指定できる。
ESNext を指定すると、最新のJavaScriptとして扱われる。
classについて
- public: 外部からアクセス可能
- protected: 継承したクラス内からアクセス可能
- private : クラス内部のみアクセス可能
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class Person { constructor(public name: string, private age: number) { } incrementAge(){ this.age += 1; } greeting(this: Person) { console.log(`Hello! My name is .${this.name}. I.am ${this.age} years old` } } |
getterとsetterについて
getter / setterを使うと、メソッドを値のように扱える。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class Human { private _name: string; public constructor(name: string) { this._name = name; } get name(): string { return this._name; } set name(name: string) { this._name = name; } } const human = new Human(""); human.name = `田中太郎`; console.log(human.name); |
interfaceについて
以下の記載でinterfaceを定義できる
?を使用すると使用時に存在が必須ではなくなる
|
1 2 3 4 5 6 |
interface Human { name: string; age: number; greeting(message: string): void; nickName?: string; } |
以下のように使用する
|
1 2 3 4 5 6 7 |
const human: Human = { name: 'Quill', age: 38, greeting(message: string){ console.log(message); } } |
classにinterfaceを適用する場合はimplementを使用する
|
1 2 3 4 5 6 |
class Developer implements Human { constructor(pubfic name: string, public age: number) greeting(message: string) { console.log('Hello!'); } } |
関数もinterfaceで定義することができる
|
1 2 3 4 5 6 7 8 9 |
interface addFunc{ (num1: number, num2: number): number; } let addFunc:addFunc; addFunc =(n1: number, n2: number) => { return n1+ n2; } |
まとめ
TypeScriptは、JavaScriptに型安全性を追加することで、開発時のミスを減らし、コードの可読性や保守性を向上させることができる。
特に、大規模開発や複数人開発では型定義の恩恵が大きく、Reactなどのフロントエンド開発でも広く利用されているため、継続して理解を深めていきたい。
