【TypeScript】構文の詳細と型と機能

型の別名 (type) の使用

• 共用体型の型定義が長すぎる問題を解決するには
• 型の別名を使用する

// 使用关键字type定义类型别名对象,可以复用
type myname = number | string
function hander1(name: myname) {
    
    
    console.log(name)
    if (typeof name === 'string') {
    
    
        console.log(name.length)
    }
}
//不使用类型别名
function hander2(x: number,y:number,z?:number) {
    
    
}
//使用类型别名
type myx={
    
    x: number,y:number,z?:number}
function hander3(mytype:myx) {
    
    
}

インターフェース宣言の使用

• キーワードはインターフェイスを使用して宣言されます
• 型エイリアスと比較すると、少ない =

//接口interface,没有=号
interface myX2 {
    
    
    x: number 
    y: number 
    z?: number
}
//使用接口声明
function hander4(mytype: myX2) {
    
    
}

2 つの違い:

• 型エイリアスはインターフェイス宣言に非常に似ており、オブジェクトを定義するときに任意に使用できます。
• 主な違い:
• タイプタイプはより広い範囲で使用されます
• type はエイリアスを定義します。同じ名前を持つ 2 つのエイリアスは許可されません

type myname = number | string

• 1. インターフェイス型はオブジェクトの宣言にのみ使用できます。
• 2. インターフェイス型がオブジェクトを宣言する場合、複数回宣言できます。
• 3. インターフェースタイプは継承をサポートします
• 4. インターフェイス タイプはクラスによる実装をサポートします。

//接口interface,没有=号，可以多次声明
interface myX2 {
    
    
    x: number 
    y: number 
}
//接口interface,没有=号
interface myX2 {
    
    
    z?: number
}
//使用接口声明
function hander4(mytype: myX2) {
    
    
}




//接口interface，支持继承
interface myX2 {
    
    
    x: number 
    y: number 
}
interface myX3 extends myX2 {
    
    
    z?: number
}
function hander5(mytype: myX3) {
    
    
    console.log(mytype.x,mytype.y,mytype.z)
}
hander5({
    
    x:1,y:2,z:3})

和集合型と交差型

共用体型

• ts を使用すると、さまざまな演算子を使用して既存の型から新しい型を構築できます。
• 共用体型 2 つ以上の型から構成される型
• 表現は次のタイプの値のいずれかになります
• 共用体型の各型は共用体のメンバーと呼ばれます。

// 联合类型
function hander(name: number | string) {
    
    
    console.log(name)
}
hander(1)
hander("123")

//联合类型
let nainfo: number | string = "abc"
nainfo = 1
nainfo = "123"

//但联合类型要使用的时候,要注意类型缩小,类似
// 联合类型
function hander1(name: number | string) {
    
    
    console.log(name)
    if (typeof name === 'string') {
    
    
        console.log(name.length)
    }
}
hander1(1)
hander1("123")

• 知らせ：
• 共用体型の値を取得した後、それはどのような型でもよいので、どのように使用するのでしょうか?
• 数値の取得と同様に、文字列の一部のメソッドは使用できません
• 解決する：
• 縮小されたコレクション、つまり型の縮小を使用し、縮小されたコードに基づいてより具体的な型を推論する必要があります。

クロスタイプ

• 交差するタイプは、複数のタイプの条件を満たす必要があることを示します
• 交差タイプではアンパサンドを使用します

//交叉类型，两种或者多种类型同时满足
type myY = number & string//想同时满足数值和字符串类型，不可能，估没有意义
type myY2 = number & string

interface myX2 {
    
    
    x: number
    y: number
}
interface myX3 {
    
    
    z?: number
    p: () => void
}
//表示即满足myX2也得满足myX3，否则里面会有报错提示
const info: myX2 & myX3 = {
    
    
    x: 1,
    y:2,
    p:()=>{
    
    
        console.log("方法")
    }
}

型アサーション

• ts は特定のクォータ タイプ情報を取得できない場合があり、このときはタイプ アサーションが必要です
• TS では、型アサーションをより具体的な、またはより具体的でないバージョンの型に変換することのみが許可されます。このルールにより、不可能なキャストが防止されます。

DOM要素を取得する

// <img class="img">。使用类型缩小使用，只知道会返回html类型，但不知道具体类型
const imgE1 = document.querySelector("img")
// imgE1.src = "",会报错
if (imgE1 != null) {
    
    
    imgE1.src = ""
}
// <img class="img">。此时imgE2为element，不能直接使用,使用类型断言
//当你确信他存在且为html时，直接使用类型断言为更具体的样子，
const imgE2 = document.querySelector(".img") as HTMLImageElement
imgE2.src = ""

• 似たような、こんな感じ。型アサーションは次のように具体的ではなくなります。

const num = 12
const num2 =num as any

• 先に進み、あまり具体的でないタイプをより具体的にアサートすることもできます
• ただし、このような前後のアサーションはサポートされていないため、潜在的なセキュリティ リスクがあります。

const num = 12
const num2 =num as any
const num3 =num2 as string

非null型アサーション

• 渡された値が未定義の可能性がある場合、現時点ではメソッドを実行できません
• シンボル! を使用すると、特定の識別子に値があることを確認する必要があり、コンパイル段階での TS の検出をスキップできます。

interface hander{
    
    
    name:string,
    age:number,
    size?:number
}
const info: hander={
    
    
    name:"乞力马扎罗",
    age:18
}
//访问可以用可选的
console.log(info?.size)

//赋值的时候,可选链不行
// info?.size=23

// 解决方法：
// 1，类型缩小
if(info.size){
    
    
    info.size=23
}
// 2.非空类型断言,有点危险，确保非空值的父值一定有值，才能使用
info!.size=23
console.log(info.size)//23

リテラル型の使用

• 割り当てられた値を型として扱い、使用する場合はリテラルのみを使用します。
• デフォルトではあまり意味がありませんが、複数のタイプを結合することは可能です。あなたはそのうちの 1 人だけになることができます。

type numtype = "left" | "top" | "up"
const num3: numtype = "left"

// 使用背景
// 一般请求方式，get或者post
// 采用这种方式，可以让用户必须传get或者post，否则报错
type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    

}
reqest('http//xxx.com', 'get')

• 背景を使用する

// 使用背景
// 一般请求方式，get或者post
// 采用这种方式，可以让用户必须传get或者post，否则报错
type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    

}
const  hander={
    
    
    url:'xxx',
    method:'post'
}
// reqest('http//xxx.com',hander.method)
//报错，报错原因，不认识你这个hander.method获取的是string类型，不是get或者post

• 解決策 1

// 解决方法1:类型断言
reqest('http//xxx.com',hander.method as "post")

• 解決策 2

// 解决方法2，直接让hander对象是个字面量类型
const  hander1 :{
    
     url:string,method:'post'}={
    
    
    url:'xxx',
    method:'post'
} as const
reqest('http//xxx.com',hander1.method)
// 或者，字面量推理
const  hander2={
    
    
    url:'xxx',
    method:'post'
} as const
reqest('http//xxx.com',hander2.method)

型の絞り込み (型の絞り込み)

• 次のような判定文を使用することで、ts の実行パスを変更できます。

if(info.size){
    
    
    info.size=23
}

• このようなステートメントはタイプ ガードとも呼ばれます
• 特定の実行パスでは、宣言された型よりも小さい型を絞り込むことができます。このプロセスは絞り込みと呼ばれます。
• 一般的な保護の種類
• typeof、返された型を確認する

type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    
    if(typeof url ==='string'){
    
    
        console.log(url)
    }
}

• 等価絞り込み (=== と !== と == など)、文字通りの判断

type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    
    if(method==="get"){
    
    
        console.log(method)
    }
}

• instanceof、それがこのインスタンスであるかどうかを示します

//传入一个实例
function reqest(data:string|Date) {
    
    
   if(data instanceof Date){
    
    
    console.log(data.getTime())
   }
}

• in 、オブジェクトに名前付きのプロパティがあるかどうかを判断するために使用される in 演算子
• 等…

TypeScript 関数の種類

関数型式

• 関数タイプの式は、関数タイプを表すように記述できます。
• tsでは関数型の仮パラメータ名は省略できません

// 函数类型表达式
// 格式：(参数列表)=>返回值
const fun: (num2: number) => number = (arg: number): number => {
    
    
   return 123
}
// 为了可阅读性,类型形参里的名不能省略
type funtype = (num2: number) => number//这个就代表一个函数类型
const fun2: funtype = (arg: number) => {
    
    
   return 123
}

// 例子，传入计算方式，计算两位数字,js写法
function cals(func) {
    
    
   const num1 = 12
   const num2 = 13
   const res = func(num1, num2)
}
function func1(num1, num2) {
    
    
   return num1 + num2
}
cals(func1)

//ts写法
type calstype = (num1: number, num2: number) => number
function cals1(func: calstype) {
    
    
   const num1 = 12
   const num2 = 13
   const res = func(num1, num2)
}
function func2(num1: number, num2: number) {
    
    
   return num1 * num2
}
cals1(func2)

内部ルールの検出

// ts对于很多的类型的检测报不报错，取决于它的内部规则
interface gule {
    
    
   name: string
   age: number
}
//直接写报错，原因，第一次定义的时候，会检测规则报错
//  const info:gule={
    
    
//    name:"山头",
//    age:12,
//    size:'大'
//  }

//但取决于内部规则，赋值完，再使用，这样就没检测，单指size的增加，其他已定义的还是会检测
const p = {
    
    
   name: "山头",
   age: 12,
   size: '大'
}
const info: gule = p

関数呼び出しのシグネチャ

• js では、関数は呼び出されるだけでなく、属性値を持つこともできます。
• 型式はプロパティの宣言をサポートしていません
• プロパティを持つ関数が必要な場合は、オブジェクト型に呼び出しシグネチャを記述します

//函数表达式，这里是箭头
//不能声明其他属性
type obj2 = (num1: number) => number



//调用签名
interface obj {
    
    
   name: string
   age: number
   //函数可以调用：函数调用签名，这里是冒号
   (num1: number): number
}

const func: obj = (num1: number): number => {
    
    
   return 123
}
func(123)

それらをどのように選択すればよいでしょうか?

• 関数の型そのものを記述する（関数の型を呼び出すことができる）だけの場合は、関数式を使用します
• 関数を呼び出し可能で他のプロパティも持つオブジェクトとして記述する場合は、関数呼び出しシグネチャを使用します。

オプションのパラメータのタイプ

• オプションのパラメータは必須パラメータの後に配置する必要があります

// 可选参数类型是什么
// 当不传的时候，y就是undefined类型，也就是number|undefined联合类型
function fun(x:number,y?:number){
    
    
   console.log(x,y)
   if(y!=undefined){
    
    
      console.log(y)
   }
}
fun(1)

パラメータのデフォルト値

// 函数的参数有默认值
// 有默认值的情况下，参数的类型注解可以省略
// 此时，有默认值的参数，哪怕是number，也可以接收一个undefined类型
function fun(x:number,y=100){
    
    
   console.log(x,y)
   if(y!=undefined){
    
    
      console.log(y)
   }
}
fun(1)

残りのパラメータ

• 残りのパラメーター構文を使用すると、無限の数のパラメーターを配列として表すことができます。
• 残りのパラメータを使用して、仮パラメータが固定されていない合計を計算する関数を定義できます。

function sum (first, ...args) {
    
    
    console.log(first); // 10
    console.log(args); // [20, 30] 
}
sum(10, 20, 30)；
// 或者
// 剩余参数，通过这种方式扩展了类型注解
function fun(...arrs: (string| number)[]) {
    
    

}
fun(1,2,3,'4')

関数のオーバーロード

• ts では、さまざまなオーバーロード関数を記述して、関数をさまざまな方法で呼び出すことができることを示すことができます。
• 一般に、2 つ以上のオーバーロードされた署名が書き込まれます。次に、一般的な関数を記述して実装します。

// 需求。将两个数字或者字符串相加
// 联合类型，这个案例用不了

// 普通实现
// function add(n1, n2) {
    
    
//    return n1 + n2
// }
// add(1,2)通用函数不可调用

//函数重载
//1，先编写重载函数
function add2(n1:number, n2:number):number
function add2(n1:string, n2:string):string

//2，再编写通用的函数
function add2(n1:any, n2:any) {
    
    
   return n1 + n2
}
console.log(add2(1,2))//3
console.log(add2("1","2"))//12

// add2("1",2)//函数 不能被调用，没有对应的重载函数

関数のオーバーロード - 共用体型 (推奨使用)

• 可能な場合は共用体型を使用する

//函数重载-联合类型
//定义一个函数，可以传入字符串或者数组，获取他们的数组
//1，编写重载函数-联合类型
function add2(arg:string|any[]) {
    
    
   return arg.length
}
console.log(add2("123"))//3