TS学習ノート
文法
非nullアサーション
後で属性を追加してください。
interface Shape {
kind: 'circle' | 'square'
radius?: number
sideLength?: number
}
function getArea(shape: Shape) {
if (shape.kind == 'circle') {
return Math.PI * shape.radius! ** 2 // 圆的面积公式 S=πr²
}
return 6666
}
const shape: Shape = {
kind: 'circle',
radius: 54,
}
console.log(getArea(shape))
デフォルトでは、circle が true の場合、半径が存在する必要があります
関数のオーバーロード
function makeDate(timestamp: number): Date
function makeDate(m: number, d: number, y: number): Date
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
if (d !== undefined && y !== undefined) {
return new Date(y, mOrTimestamp, d)
} else {
return new Date(mOrTimestamp)
}
}
const d1 = makeDate(12345678)
const d2 = makeDate(5, 5, 5)
const d3 = makeDate(1, 3)
// No overload expects 2 arguments, but overloads do exist that expect either 1 or 3 arguments.
任意のプロパティを持つオブジェクト
オブジェクト インデックス署名宣言とレコード ツール クラスの 2 つの方法を使用できます。
// 1.对象索引签名
interface CustomObject {
[key: string]: string
}
function fn1(data: CustomObject) {
console.log(data)
}
// 2.使用 Record 工具类
function fn2(data: Record<string, any>) {
console.log(data)
}
fn1(1)
fn1('')
fn1()
fn1({
name: 'zs' })
fn1({
age: 13 })
fn2(1)
fn2('')
fn2()
fn2({
name: 'zs' })
fn2({
age: 13 })
クロスオーバータイプ
使用とリンク
interface Colorful {
color: string
}
type ColorfulSub = Colorful & {
color: number
}
インポートとエクスポートを入力します
// @filename: animal.ts
export type Cat = {
breed: string; yearOfBirth: number }
// 'createCatName' cannot be used as a value because it was imported using 'import type'.
export type Dog = {
breeds: string[]; yearOfBirth: number }
export const createCatName = () => 'fluffy'
// @filename: app.ts
import {
createCatName, type Cat, type Dog } from './animal.js'
const name = createCatName()
アドバンストタイプ
記録
属性のタイプが左側にあり、値が右側にあります
選ぶ
左側は選択可能な属性を示し、右側は選択された属性を示します。
interface Todo {
title: string
description: string
completed: boolean
}
type TodoPreview = Pick<Todo, 'title'>
const todo: TodoPreview = {
title: 'Clean room',
completed: false,
}
todo.completed
// const todo: TodoPreview
省略
左側は選択可能な属性、右側はフィルタリングして除外する必要がある属性です。
interface Todo {
title: string
description: string
completed: boolean
createdAt: number
}
type TodoPreview = Omit<Todo, 'description'>
const todo: TodoPreview = {
title: 'Clean room',
completed: false,
createdAt: 1615544252770,
}
除外する
交差点を曲がる
type T0 = Exclude<'a' | 'b' | 'c', 'a'>
// type T0 = "b" | "c"
type T1 = Exclude<'a' | 'b' | 'c', 'a' | 'b'>
// type T1 = "c"
type T2 = Exclude<string | number | (() => void), Function>
// type T2 = string | number
意味は、T と K が共有していないフィールドを取得することです。
抽出する
交差点を曲がる
fields: Array<Extract<keyof T, keyof K>>
意味は、T と K に共通のフィールドを取ることです。
戻り値の型
Type 関数の戻り値を含む型を構築するために使用されます。
declare function f1(): {
a: number; b: string }
type T0 = ReturnType<() => string>
// type T0 = string
type T1 = ReturnType<(s: string) => void>
// type T1 = void
type T2 = ReturnType<<T>() => T>
// type T2 = unknown
type T3 = ReturnType<<T extends U, U extends number[]>() => T>
// type T3 = number[]
type T4 = ReturnType<typeof f1>
// type T4 = {
// a: number;
// b: string;
// }