6 советов по разработке TypeScript

внешний интерфейс TypeScript

"Это 25-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления"

В этой статье обобщается небольшой опыт разработки приложений с помощью TypeScript. Прежде чем говорить, порекомендуйте плагин, который VSCODE сразу выполняет код TSquokka.js, как использовать,ctrl+shipt+p, введите ключевое слово квокка

image.pngПосле возврата каретки код будет выполнен сразу после ввода кода

image.png

1. Определите тип сущности перед разработкой

Перед формальным кодированием, если нет документа интерфейса, лучше всего получить словарь данных и определить типы сущностей в проекте в соответствии со словарем данных.Например, если в словаре данных есть пользовательские таблицы и корпоративные таблицы, мы можно создать новую папку типов и поместить. Соответствующие типы размещены в разных файлах, а каталоги следующие:

types
    user.ts
    corp.ts
    ...

Рекомендуемое использованиеinterfaceОпределите тип объекта, который лучше, чем семантика типа

interface User{
    id:string
    name:string
}

2. При запросе интерфейса вам нужно только определить поля, которые вам нужно использовать

При определении типа вам нужно определить только те поля, которые вам нужно использовать, а бесполезные поля определять не нужно. Из-за типа данных, возвращаемых серверной частью, клиентская часть должна указать тип, а затем TS выносит решение.Если клиентская часть не указывает тип, TS вообще не может судить.

Например, данные, возвращаемые серверной частью, выглядят следующим образом:

user:{
    id:1,
    name:'xiaoming',
    sex:0
}

Определены следующие типы:

interface User{
    id:number,
    name:string
}

В этом случае TS будет проверять только наличие id и имени у пользователя, что игнорируется для пола.

3. Используйте типы перечисления

Для определения типов перечисления подходят такие типы структур данных, как пол (мужской и женский), тип администратора (суперуправление, обычный пользователь), тип членства (обычный пользователь, VIP, супер VIP), а также типы перечисления могут использоваться в качестве значений. , использовать. Возьмите каштан:

//使用枚举类型来定义会员类型
enum UserType{
    Common=0,
    VIP=1,
    SuperVIP=2
}
class User{
    id:string
    name:string
    type:UserType
}
let  userList:User[]=[]

userList.push({
    id:'001',
    name:'Jack',
    type:UserType.SuperVIP //枚举类型定义的类型可以作为值来使用
})

Тип перечисления также может быть строкой, например, использование такое же, как указано выше.

enum UserType{
    Common='DiaoSi',
    VIP='LowBVIP',
    SuperVIP='SuperVIP'
}

4. Тип элемента DOM должен быть задан как обычный.

Для элементов DOM ничего не указывайте, у них есть типы.

Как правило, все теги наследуются отHTMLElement, а затем разные теги имеют разные типы, часто рутинные, например, тип элемента видеоHTMLVideoElement, тип элемента divHTMLDivElement, тип элемента холстаHTMLCanvasElement, и так далее. На самом деле общеупотребительных типов не так много, просто перечислим их:


let element:HTMLElement=null

let video:HTMLVideoElement=null

let div:HTMLDivElement=null

let canvas:HTMLCanvasElement=null

let e:Event =null //事件对象  e.target

Обязательно укажите тип элемента DOM, чтобы вы могли получить подсказки по коду.

image.png

Вот дополнение о том, как указать тип при загрузке файла и привязать метод onChange к элементу Input, метод выглядит следующим образом:

onChange(event: Event): void {
  if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) {
    const [file] = event.target.files;
  }
}

5. Как указать тип объекта

Есть функция, которая получает в качестве параметра объект, как передать тип?

image.png

Во-первых, ничего не давайте, не давайте никогда, это ниже, подумайте о том, что содержит объект, ключ, значение. Ключ должен быть строкового типа, а значение зависит от конкретных требований.Возможно, что ваше значение может быть только числом или строкой, тогда число|строка, если что-то устраивает, то давайте любому.


//定义对象的类型,key一般是string，value可以按照需求给
interface ObjType{
	[key:string]:any
}
function deepCopy(obj:ObjType){
    for(let key in obj){
        console.log(obj[key])
    }

}

let obj={name:"Jack"}
deepCopy(obj)

6. Как задать тип при присвоении структуры

У вас есть функция, которая получает объект, деконструирует параметры в объекте и как указать тип свойства объекта, полученного структурой.Код выглядит следующим образом:

const user={
    name:'Jack',
    age:10,
    friends:[{id:0,name:'Peter',connect:100},{id:1,name:'Alice',connect:69}]
}

interface Friend{
    id:number,
    name:string,
    connect:number
}


function handleFriends({friends}){//friends的类型要怎么给
    friends.map(item=>item.connect)
}

подумать 10 секунд,

10

9

8

7

6

5

4

3

2

1

Поставьте ответ:

interface Friend{
    id:number,
    name:string,
    connect:number
}

function handleFriends({friends}:{friends:Friend[]}){
    friends.map(item=>item.connect)
}

Это больше используется в реагирующих хуках.

Что ж, эта статья здесь, до завтра!

Категории