Aserciones de tipo

La prioridad de usar as por encima de <> es desde la versión 1.6 de Typescript debido a que había ambigüedad en archivos .jsx

Para más información aquí

Se puede obligar el uso del método con as desde el archivo ts.config.js

{
  rules: {
    "no-angle-bracket-type-assertion": true
  }
}

Documentación oficial sobre <> y ‘as’ en TS

Se recomienda más usar as ya que <> trae problemas con React

Aserciones de tipos: Mecanismo de conversión de tipos de datos. Se parece al casting de tipos en otros lenguajes de programación.
Usa dos sintaxis.

//Angle Bracket: <Type>
let username : any;
username = (<string>'danijazzero').toUpperCase()
///as: variable as type
username = (username as string).toLowerCase()

export {};

//<type> // Angle Bracket syntax
let username: any;
username = 'anbreaker';

// Tenemos un string, Complidor de TS confia en mí:
let message: string =
  (<string>username).length > 5 ? `Welcome ${username}` : `username is too short`;
console.log('Message ->', message);

let usernameWithId: any = 'anbreakera 1415';
// Como obtener el username?

usernameWithId = (<string>usernameWithId).substring(0, 9);
console.log('username only', usernameWithId);

// Sintaxis 'as'
usernameWithId =
  (username as string).length > 5 ? `Welcome ${username}` : `username is too short`;
console.log('username ->', username);

let helloUser: any;
helloUser = 'Hello Coder';
username = (helloUser as string).substring(6);
console.log('username', username);

Creo que es mas escalable usar la funcion .split del objeto string, asi no tenemos que hacer manualmente cuentas para dividir las palabras:

let usernameid:any = 'derick 421';

let nameonly:string = (<string>usernameid).split(' ')[0];
let idonly:string = (usernameid as string).split(' ')[1];
console.log(nameonly);
console.log(idonly);

NO, compilador, no confíes en mi XD.

// Aserciones de Tipo
export {}
// <tipoDato> // angle Backet syxntax
let username: any;
username = 'luixaviles';

// tenemos una cadena, TS confia en mi!
let message: string = (<string>username).length > 5 ? `Welcome ${username}` : `Username is too short`;
console.log('message', message);

let usernameWithId: any = 'luixaviles 1';
// Como obtener el username ?
username = (<string>usernameWithId).substring(0, 10);
console.log('Username only', username);

// Sintaxis = 'as'
message = (username as string).length > 5 ? `Welcome ${username}` : `Username is too short`;

let helloUser: any;
helloUser = 'hello paparazzi';
username = (helloUser as string).substring(6);
console.log('username', username);

• Aserciones de tipos : Provee un mecanismo para ‘cobvertir’ los tipos en algo que conocemos. Debe TS tener un mecanismo para que esto suceda. TS no realiza ningún tipo de verificación y noa fecta el tiempo de ejecución del código.

// Type assert
let username: any;
username = 'afelipelds';
username = 'felipe';
let userName: any;
userName = 'afelipelds 345'

/**type with < > */
let message: string = (<string>username).length > 5 ? `hello to world ${username}` : `Your Username It's too short`;
console.log('message ', message);
let obtainJustUSername = (<string>userName).substring(0,10);
console.log('obtainJustUSername ', obtainJustUSername); 

/**type with as */
let helloUSer: any;
helloUSer = 'Hello my dear Friend';

let newGreeting = (helloUSer as string).slice(14);
console.log('newGreeting ', newGreeting);

Lo hice de esta manera para que ignorara los ultimos digitos (la id) y solo imprimiera en consola el nombre del usuario

let usernameWithId: any = 'wydisss 50';
// Como obtener el username?
username = (<string>usernameWithId).substring(0,(<string>usernameWithId).length-3)
console.log('username',username)

En este momento React “16.13.1” solo permite as

Perdon por el off-topic
Minuto 0:30

ASERCIONES DE TIPO
.

• Cuando el programador puede conocer más que typescript sobre el valor de una variable
• Es un mensaje al compilador: “Confia en mi, se lo que hago”
• Se parece al casting de tipos en otros lenguajes de programación
• Usa dos sintaxis: <Angle Bracket> y (variable as tipo)

export{}
//<tipo> // Angle Bracket sintax
let username:any;
username = 'luixaviles';

//tenemos una cadena, TS confia en mi!
  //Queremos utilizar la funcion length pero la variable esta declarada con any
    //Entonces lo que hacemos es utilizar <tipoDato> para indicarle que es un string
       //Y poder utilizar length para conocer la longitud del string
let message:string = (<string>username).length > 5? 
                      `Welcome ${username}`:
                      'Username es muy corto';
console.log(message);

let usernameWithId: any  = 'luixviles 1';
//Como obtener el username

username = (<string>usernameWithId).substring(0,10);
console.log(username);

//Sintaxis as
  //Es otra forma de insertar tipos en ts
    //En lugar de los <> podemos utilizar as dentro de los parentisis para especificarle
      // Un tipo de dato a la variable

message = (username as string).length > 5? 
                      `Welcome ${username}`:
                      'Username es muy corto';
console.log(message);

let helloUser: any;
helloUser = "hello paparazzi";
username = (helloUser as string).substring(6);

Para obtener el username un poco “más dinámico” podemos obtener el indice del primer espacio

.substring(0, (<string>usernameWithId).indexOf('  '))

Aserciones de tipo

• Cuando el programa puede conocer mas que TypeScript sobre el valor de una variable
• Es un mensaje al compilador: “Confia en mi, se lo que hago”
• Se parece al casting de tipos en otros lenguajes de programacion
• Usa dos sintaxis: <Angle bracket> y (variable as tipo) (as)

Valor de una variable en su tipado.
<tipo> Le indico el tipado con <> para usar métodos del tipo.

Una mejor manera de separar un User Name con un ID, separados con un espacio es usar la función split. La cuál, a partir de un parámetro, separa el string en un array.

Para el ejemplo tenemos en string “JoseH 1”, con la función split, dividimos el usuario y el ID divididos por el espacio. Obteniendo un array [‘JoseH’, ‘1’]. Con este resultado, podemos acceder al índice 0 para obtener el User Name.

let userNameWithId : any = 'JoseH 1'
let anotherUserName = (<string>userNameWithId).split(" ")
console.log(anotherUserName);
let newUser = anotherUserName[0]
console.log(newUser)

Cuando el dev conoce más que el compilador de TS es necesario un mecanismo que permita hacer una conversión de tipos de datos. En tal caso le estamos diciendo al compilador “confía en mi, sé lo que estoy haciendo”.

• Se parece al casting en otros lenguajes de programacion

// <> // angle bracket syntax
let username: any;
username = 'fedewalo';

// En esta variable declarada como any tengo un string, Ts confia en mi
let message: string = (<string>username).length > 5 ? 
											`Welcome ${username}`:
											`Username is to short`;

//Sintaxis as
let username: any;
username = 'fedewalo';

message: string = (username as string).length > 5 ? 
											`Welcome ${username}`:
											`Username is to short`;

el uso de “as” esta mas usado por programadores que vienen de otros lenguajes.

Cuando el dev conoce más que el compilador de TS es necesario un mecanismo que permita hacer una conversión de tipos de datos. En tal caso le estamos diciendo al compilador “confía en mi, sé lo que estoy haciendo”.

let username:any;

username=‘luixaviles’;

let message:string =(<string>username).length>5?
Welcome ${username}:
‘Username is too short’;

console.log(‘message’, message);

export {}

// <> // Angle Bracket Syntax
let username: any;
username = 'Mara';

// tenemos una cadena, TS confía en mi!
let message: string = (<string>username).length > 5 ?
        `Welcome ${username}`:
        'Username is too short';
console.log('message',message);

// cómo obtener el username a partir de esta expresión
let usernamewithID: any = 'Marita 1';
username = (<string>usernamewithID).substring(0,6);
console.log('username only',username);

// sintaxis "as"
message = (username as string).length > 5 ?  // quitamos let porque no necesita ser declarada
        `Welcome ${username}`:
        'Username is too short';

let hellouser: any;
hellouser = 'hello Marita';
username = (hellouser as string).substring(6);
console.log('username',username);

Si tienes alguna función de alguna librería que no sabes que parámetros obtiene, y quieres guardarlo en un un objeto aparte, puedes usar

const parameters: Parameters<typeof function>[0] = {...}

Y esto creara un objeto del tipo exacto que recibe ese objeto, teniendo las ventajas de autocompletado y evitar errores que se tendría creando un objeto dentro de la función.

b

Yo lo resolví utilizando split() y as en vez de <tipo>.

let usernameWithId: any = 'username 1';
const [userN, id] = (usernameWithId as string).split(" ");
console.log('Username:', userN);