勉強[203222 TIL]Typescript|Everyday Types

完全なコードはgitにあります.tsの正式なドキュメントを学習して主観的に再編成すると、エラーが発生する可能性があります.コメントに誤りが指摘された場合は、感謝します:)

変数のタイプ

tsにおけるタイプは(もちろん)jsのタイプと非常に似ている.number、string、booleanは同じタイプの宣言方式である.また、const、var、letなどを使用して変数を宣言する場合は、変数のタイプを明示的に指定するためにタイプタグを追加できます.これはオプションです.
配列は2つの方法でタイプを設定できます.Array<number>とnumber[]はまったく同じです.

// 1.1 변수에 대한 타입 표기 - 원시타입(선택사항)
const name: string = "jisu"
const age: number = 10
const toggle: boolean = true

// 1.2 Array
const numArray1: Array<number> = [1, 2, 3]
const numArray2: number[] = [4, 5, 6]
const strArray1: Array<string> = ["a", "b", "c"]
const strArray2: string[] = ["e", "f", 'g']

// 1.3 any
let obj: any = {x: 0}
obj.foo() // any 지정해서 오류 안 생김
obj()
obj.bar = 100
obj = "hello"
const n: number = obj;

anyを使用すると、tsは開発者が自分で作成し、タイプチェックを行わないと信じています.したがって、実行中にエラーが発生します.anyの代わりに、できるだけ正しいタイプを使用します.

関数のタイプ

関数に定義されるタイプは、おおよそinput、ouputである.つまり、パラメータと戻り値のタイプを指定できます.

function addFive(x: number): number {
    return x + 5
}

前述したように、パラメータと戻り値のタイプを指定できます.これにより、関数を呼び出すときに指定したタイプが異なる場合、警告メッセージが表示されます.親切ですね.

匿名関数

forEachパラメータを入力する匿名関数については、パラメータsのタイプを指定しなくても、stringであることに気づき、警告情報を与える.

const names = ["Alice", "Bob", "Eve"];
names.forEach((s) => {
    console.log(s.toUppercase()) // Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
})

これはtsが作成した문맥적 타입 부여であり,タイプを指定しなくてもtsは自分で判断する.

オブジェクトタイプ

は、jsで最も一般的で最も重要なオブジェクトタイプです.

function printCoord(pt: { x: number; y: number }) {
    console.log("The coordinate's x value is " + pt.x);
    console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

ポイントを示すptオブジェクトがあり、ptの属性x,yがnumberであるかを確認します.プロ選手同士では;を使用してもよいし、,の組み合わせを使用してもよい.タイプが指定されていない場合は、anyとみなされます.

客商

次の関数は、パラメータを選択的に受信するために使用できます.これは、オブジェクトのpropertyの後に?を追加し、オプションのpropertyであることを意味する.あってもいいし、なくても大丈夫です.ただし、オプションなので、なくても分割して問題が発生しないようにします.

function printName(obj: { first: string; last?: string }) {
    console.log(obj.last.toUpperCase()); // 오류 - `obj.last`의 값이 제공되지 않는다면 프로그램이 멈추게 됩니다!

    if (obj.last !== undefined) {
      // OK
      console.log(obj.last.toUpperCase());
    }
   
    // 최신 JavaScript 문법을 사용하였을 때 또 다른 안전한 코드
    console.log(obj.last?.toUpperCase());
}
printName({ first: "Bob" }); // OK
printName({ first: "Alice", last: "Alisson" }); // OK

unionタイプ

unionは合集を表し、or.これは2つ以上のタイプを許可する方法です.
次の関数はidというパラメータを受け入れ、idはnumberまたはstringである.
したがって、上記の2つのタイプではなく他のタイプを入力するとエラーが発生します.

function printId(id: number | string) {
    console.log("Your ID is: " + id); // num, str 둘다 오류 없는 작업
    console.log(id.toUpperCase()); // num 일때 오류 발생
}
printId(101); // OK
printId("202"); // OK
printId({ myID: 22342 }); // obj 여서 오류

また,2つ以上のタイプが受信されると,関数で共通に動作できない動作を分岐処理する必要がある.

縮小汎用

上記では、2つのnumber、stringを許可し、関数内部で異なる結果値をタイプチェックによって出力することができる.このときパラメータタイプはnumberまたはstringであり、条件文if-elseで十分である.

function printId2(id: number | string) {
    if (typeof id === "string") {
        // 이 분기에서 id는 'string' 타입을 가집니다

        console.log(id.toUpperCase());
    } else {
        // 여기에서 id는 'number' 타입을 가집니다
        console.log(id);
    }
}

もう1つの方法は、配列を受け入れればisArray()等と確認できる.

function welcomePeople(x: string[] | string) {
    if (Array.isArray(x)) {
      // 여기에서 'x'는 'string[]' 타입입니다
      console.log("Hello, " + x.join(" and "));
    } else {
      // 여기에서 'x'는 'string' 타입입니다
      console.log("Welcome lone traveler " + x);
    }
}

共通の特徴を持つ労働組合

次の関数は、最初の3つの関数を返し、配列または文字列を入力します.どちらもかわいいオブジェクトなので、slice()メソッドがあるので、分岐する必要はありません.戻りタイプはnumber[] | stringです.

function getFirstThree(x: number[] | string) {
    return x.slice(0, 3);
}

タイプ別名

複数の関数で同じパラメータを使用する場合は、タイプ別名を使用して重複を最小限に抑えることができます.

type Point = {
    x: number;
    y: number;
};
   
function printCoord2(pt: Point) { // 위의 타입으로 간편하게 사용
    console.log("The coordinate's x value is " + pt.x);
    console.log("The coordinate's y value is " + pt.y);
}
   
printCoord2({ x: 100, y: 100 });

一般的なオブジェクトタイプは、타입 별칭として宣言して使用できます.

汎用タイプ別名

タイプ別名は、よく使うタイプを使用するために宣言されるだけです.したがって、以下の場合によっては、国連も単独で命名することができる.

type ID = number | string; 

インタフェース

インタフェースはタイプと似ていますが、最大の違いは、インタフェースがobjectタイプのみを定義していることです.
上記のタイプエイリアスで記述されたものは、インタフェースで同じ内容を記述することができます.

interface MyPoint {
    x: number;
    y: number;
}
   
function printCoord3(pt: MyPoint) { // 파라미터의 구조에만 관심, 타입 검사
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}

printCoord3({ x: 100, y: 100 });

インタフェースvsタイプ別名

これはts公式ファイルで説明されている異なる点の例です.

多くの場合、インタフェースはタイプ別名よりも多く使用されるようです.

タイプブレークスルー

tsが提案するタイプよりも正確で詳細なタイプに使用されます.
2つの方法は同じで、asを使用してもよいし、ハンマーで前に表示してもよい.開発者が要素のidを正しく入力し、これらのオブジェクトがcanvasであることを正確に知っている場合に使用します.基本的に、document.getElementByIdのタイプはHTMLElementである.

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

文学の類型

文字や数字については、いくつかの値だけを許可したい場合があります.この場合、一般的には、変数を宣言する際にconstを使用すると、値を変更することはできません.これは、それを利用する方法です.

let changingString = "Hello World";
changingString = "Olá Mundo";
// 변수 `changingString`은 어떤 문자열이든 모두 나타낼 수 있으며,
// 이는 TypeScript의 타입 시스템에서 문자열 타입 변수를 다루는 방식과 동일합니다.
changingString;
      
let changingString: string
 
const constantString = "Hello World";
// 변수 `constantString`은 오직 단 한 종류의 문자열만 나타낼 수 있으며,
// 이는 리터럴 타입의 표현 방식입니다.
constantString;

変数を宣言するときにletが使用される場合、変数のタイプは親タイプ、すなわち上記の場合stringと推定される.逆に、constを使用すると、宣言された値でタイプが正確に指定されます.letを使用して文字タイプを指定する場合は、次のように記述できます.

let x: "hello" = "hello";
// OK
x = "hello";
// ...
x = "howdy";

関数での使用

純粋なタイプは、関数などで使用する場合に真価を発揮します.次のいくつかの事前に指定されたオプションのみを適用するには、テキストタイプを使用します.

function printText(s: string, alignment: "left" | "right" | "center") {
    // ...
  }
printText("Hello, world", "left");
printText("G'day, mate", "centre"); // 오타 감지

パラメータだけでなく、関数の戻り値にも使用できます.

function compare(a: string, b: string): -1 | 0 | 1 {
    return a === b ? 0 : a > b ? 1 : -1;
}

純粋なタイプのユニオンではなく、他のタイプと一緒に使用することもできます.

interface Options {
    width: number;
  }

function configure(x: Options | "auto") {
    // ...
}
configure({ width: 100 });
configure("auto");
configure("automatic");

文学的推論.

jsでは、オブジェクトがconstと宣言されている場合でもpropertyを変更または追加できます.したがって,文字推論の要求に従わずにletのように操作を行うことができる.

declare function handleRequest(url: string, method: "GET" | "POST"): void;
const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method); // "GET" 이라는 리터럴이 아닌, 문자열로 추론되어 오류 발생

handleRequest関数は、urlとmethodの2つのパラメータ入力を受け入れます.このとき、methodは文字タイプであり、GETとPOST入力のみが受け付けられる.
しかしながら、reqオブジェクトの各項目は、上述した関数のパラメータと完全に一致しているように見えるが、上述したように、オブジェクトの属性は修正可能なletとみなされるため、非文字列と推定され、エラーを招く.
この問題を解決するために、いくつかの方法がある.

解決策タイプブレークスルーの追加

これは、asを使用して、より詳細でより正確なタイプを明記する方法である.

// 수정 1:
const req2 = { url: "https://example.com", method: "GET" as "GET" };
// 수정 2
handleRequest(req2.url, req2.method as "GET");

解決策as constを使用してオブジェクト全体をテキストに変更する

オブジェクトを変更できないconstに変換します.

const req3 = { url: "https://example.com", method: "GET" } as const;
handleRequest(req3.url, req3.method);

nullとundefined

strictNullChecksオプションを設定しない場合は、指定したタイプでもnull、undefinedを許可します.したがって、より厳密なタイプを指定するには、上記のオプションをオンにしたほうがいいです.strictNullChecksに設定されている場合は、Unionタイプを使用して、条件分岐によってエラーを防止できます.

function doSomething(x: string | undefined) {
    if (x === undefined) {
      // 아무 것도 하지 않는다
    } else {
      console.log("Hello, " + x.toUpperCase());
    }
}

またnullでないことが明確であればnullではないと断言する!を用いて以下の内容を記述することができる.

function liveDangerously(x?: number | undefined) {
    // 오류 없음
    console.log(x!.toFixed());
}

Reference

typescript公式ドキュメント

giphy