1. Digite anotações
: número é uma anotação de tipo, a maneira de adicionar restrições de tipo às variáveis, que tipo é acordado e que tipo de valor só pode ser atribuído à variável
let age: number = 18
2. Regras e especificações de nomenclatura de variáveis
Regras de nomenclatura: nomes de variáveis só podem aparecer números, letras, sublinhados (_), cifrões ($) e não podem começar com números
Convenção de nomenclatura: o nome da variável é significativo e é recomendado usar a nomenclatura camel case (a primeira letra é primária e a primeira letra de cada palavra subsequente é maiúscula)
3. Tipo de dados
Tipos primitivos: tipos de dados básicos: número, string, booleano, underfiend, null
//number类型
let size: number = 18
//string类型
let food: string = 'ice cream'
//boolean类型
let isOpen: boolean = true
//underfiend类型
let u: underfiend = underfiend
//null类型
let n: null = null
Tipo de objeto: anotação de tipo de objeto de tipo de dados complexo , o objeto em ts é estruturado, antes de usar o objeto, a estrutura do objeto pode ser projetada antecipadamente de acordo com a necessidade
//类型注解（对象的结构化类型），建立一种契约，约束对象的结构，类型注解中键值对的值为类型
let person : {
name:string;
age: number
}
//ts中的对象
person = {
name:'llh';
age: 36
}
Anotações de tipo para métodos de objeto:
let p1 :{
sayHi:()=>void //无参数无返回值
}
let p1 = {
sayHi:function(){
console.log(1)
}
}
let p2: {
sing:(name:string) => void //有参数无返回值
}
let p2 = {
sing:function(name: string){
console.log(2)
}
}
let p3 :{
sum: (num1:number,num2:number) => number //有参数有返回值
}
let p3 = {
sum:function(num1:number,num2:number){
return num1 + num2
}
}
objeto de matriz
let nums: number[] = [10,20,30,40,]
let sum: number = 0
for(let i = 0,u<nums.length,i++){
sum+=nums[i]
console.log(sum) //100
}
Para a função de retorno de chamada de forEanch, você precisa especificar anotações de tipo para parâmetros ou valores de retorno?
Não, a função de retorno de chamada aqui é passada como o parâmetro real do método forEach, e a anotação de tipo ts não deve ser especificada.
Ao criar o método forEach, os parâmetros do método forEach e as anotações de tipo dos parâmetros já foram especificado.
Por exemplo:
function forEach(callbackfn:(value:string,index: number)=>void)
forEach(function(value,index){
})
Quarto, o uso da interface
Escreva a anotação de tipo diretamente após o nome do objeto. 1. A estrutura do código não é concisa. 2. A anotação de tipo não pode ser reutilizada.
Por exemplo:
let p1 :{
name: string,
age: number,
sayHi:()=>void
} = {
name:'llh',
age:36,
sayHi:function(){
console.log(1)
}
}
let p2 :{
name: string,
age: number,
sayHi:()=>void
} = {
name:'fdb',
age:16,
sayHi:function(){
console.log(1)
}
}
Use a interface para nomear a anotação de tipo do objeto e estabeleça um contrato para o código restringir a estrutura do objeto.A convenção de nome da interface começa com I Gramática
:
interface IUser {
name: string
age: number
}
usar:
let p1: IUser = {
name:'llh',
age:36,
sayHi:function(){
console.log(1)
}
}
let p1: IUser = {
name:'fdb',
age:16,
sayHi:function(){
console.log(1)
}
}
5. Inferência de tipo TS
Em TS, em alguns lugares onde o tipo não é claramente indicado, a inferência de tipo ajudará a fornecer o tipo, e a anotação de tipo pode ser omitida.Cenários de
uso:
1. Ao declarar e inicializar variáveis
interface IUser {
name: string
}
let age: number = 18
如果改成以下写法也可以
let age = 18
A inferência de tipo ainda é dada por número, e a inferência de tipo infere que é um tipo numérico baseado no valor
let person: IUser ={
name:'lilianhua'
}
等同于
let person ={
name:'lilianhua'
}
Se a variável for declarada primeiro e depois atribuída, não haverá inferência de tipo, como:
let num ;
num = 12
any representa qualquer tipo
2. Ao determinar o valor de retorno de uma função
function sum (num1: number,num2: number): number{
return num1 + num2
}
sum(1,6)
等同于：
function sum (num1: number,num2: number){
return num1 + num2
}
sum(1,6)
O TS irá inferir o tipo do valor de retorno da função com base no conteúdo retornado após a repetição.Se o valor de retorno após o retorno for verdadeiro, o valor de retorno da função se tornará booleano
Seis, afirmação do tipo TS
Quando querySelector() é chamado para obter elementos DOM por id, os tipos de elementos obtidos são todos Element. Como o tipo do elemento não pode ser determinado com base no id, este método retorna um tipo amplo. O tipo de elemento (Element)
contém apenas atributos e métodos comuns a todos os elementos, como o atributo id, mas se for um tag img, ela não pode ser obtida. para o atributo src do elemento img
As asserções de tipo podem especificar manualmente tipos mais específicos.
Sintaxe:
值 as 更具体的类型
como:
let img = document.querySelector('#image')
改为
let img = document.querySelector('#image') as HTMLImageElement
意为：我们确定id="image"的元素是图片元素，我们将类型指定为HTMLImageElement
Dica: Imprima o elemento DOM através de console.dir(), e você poderá ver o tipo do elemento no final do atributo
console.dir(img)
Sete, enumeração de objeto TS
ts enumeration enum enumeration name {membro 1, sucesso 2, ...}, nome de enumeração da convenção, nome do membro começa com letra maiúscula
enum Gender {
Female，Male}
A enumeração é usada, a enumeração é um tipo, portanto pode ser usada como uma anotação de tipo para variáveis
enum Gender {
Female，Male}
let userGender: Gender
Acesse os membros na enumeração Gênero como o valor da variável userGender, os membros da enumeração são somente leitura e não podem ser editados
enum Gender {
Female，Male}
let userGender: Gender = Gender.Famale
userGender = userGender.Famale ? Gender.Famale :Gender.Male
Os membros da enumeração têm valores e o valor padrão é um valor de incremento automático começando em 0. O valor do membro da enumeração é uma enumeração de números, que é chamada de enumeração digital
enum Gender {
Female,//0
Male,//1
a,//2
b,//3
c//4
}
Os membros do Enum podem inicializar valores
enum Gender {
Female = 1,
Male = 2,
a = 44,
b = 55,
c = 66
}
A enumeração cujo valor é uma string é chamada de enumeração de string. A enumeração de string não tem comportamento de autoincremento, portanto cada membro deve ter um valor inicial
enum Gender {
Female = '女',
Male = '男',
}